<template>
  <div class="address-item">
    <template v-if="$props.addressData && $props.addressData.name">
      <div class="icon">
        <i class="el-icon-location"></i>
      </div>
      <div class="left">
        <div class="line1">
          <div class="name">{{ $props.addressData.name }}</div>
          <div class="mobile">{{ $props.addressData.mobile }}</div>
        </div>
        <div class="line2">
          <span class="default" v-if="$props.addressData.isDefault===1">默认</span>
          {{ $props.addressData.province+','+$props.addressData.city+','+$props.addressData.county}}
        </div>
        <div class="line3">
          <span class="ovd_s">{{ $props.addressData.address }}</span>
        </div>
      </div>
      <div class="right">
        <!--管理地址-->
        <span v-if="$props.showType!==1 && $props.isReChoose">
          <i class="el-icon-edit" @click="edit"></i>
          编辑
        </span>

        <!--仅选择地址-->
        <span @click="reChooseAddress" v-if="$props.showType===1 && $props.isReChoose!==false">
          <i class="el-icon-refresh-left"></i>
          重新选择
        </span>

        <!--仅选择地址-->
        <span @click="chooseCurrAddress" v-if="$props.showType===2">
          <i class="el-icon-success"></i>
          选择
        </span>

      </div>
      <div class="c"></div>
    </template>

    <template v-if="!$props.addressData.id">
      <div align="center">
        <br>
        暂无地址信息，点击
        <el-button
          icon="el-icon-plus"
          type="success"
          @click="createAddress">
          添加
        </el-button>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "AddressItem",
  props: {
    isReChoose:false,
    addressData: Object,
    // 0.管理地址 1.展示地址(仅展示)
    showType:Number,
    from:'',
    chooseAddressCallBack:Function
  },
  mounted() {
    // console.log('this.$props.addressData',this.$props.addressData)
  },
  methods:{
    // 编辑地址
    edit:function () {
      this.bus.$emit('ChooseAddressDialogCallBus',this.$props.addressData)
    },
    // 重新选择地址
    reChooseAddress:function () {
      this.bus.$emit('ChooseAddressDialogCallBus',this.$props.chooseAddressCallBack)
    },
    createAddress:function () {
      this.cacheCurrUrl()
      this.bus.$emit('ChooseAddressDialogCallBus',{})
    },
    // 确认选择当前地址,返回【确认订单】页面(带上选择地址ID)
    chooseCurrAddress:function () {
      if (typeof this.$props.chooseAddressCallBack==='function'){
        this.$props.chooseAddressCallBack(this.$props.addressData)
      }
    }
  }
}
</script>

<style scoped>
.address-item{ text-align: left; display: inline-block; width:500px; font-size: 12px; height: 80px; padding: 5px 0px; background: #FFFFFF; color: #555555; margin: 5px auto; border: 1px solid #EEEEEE; border-radius: 5px;}
.address-item>.icon{ width: 10%; height: 80px; float: left; line-height: 80px; text-align: center;}
.address-item>.icon>i{ font-size: 22px; color: #c62121}
.address-item>.left{ width: 64%; float: left; line-height: 25px; text-indent: 10px;}
.address-item>.right{ width: 25%; float: left; text-align: center; line-height: 80px; color: #888888;}
.address-item>.right>span{ display: inline-block; height: 80px; line-height: 80px;}
.address-item>.right>i{font-size: 16px; }
.address-item>.left>.line2>.default{ background: #fce1de; border-radius: 3px; color: #e05050; display: inline-block; padding: 0px 5px; text-indent: 0px;}
.address-item>.left>.line3{ color: #333333;}
.address-item>.left>.line3>span{ display: inline-block; max-width: 100%; text-indent: 0px;}
.address-item>.left>.line1{ display: flex; font-weight: bold}
.address-item>.left>.line1>.name{ flex: 1; font-size: 13px;}
.address-item>.left>.line1>.mobile{flex: 1}
</style>
